<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Welcome to the Spring MVC Quickstart application! Get started quickly by signing up!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/resources/css/bootstrap.min.css}"
    />
    <link href="../../../resources/css/core.css" rel="stylesheet" media="screen" th:href="@{/resources/css/core.css}" />
    <script src="../../../resources/js/jquery.min.js" th:src="@{/resources/js/jquery.min.js}"></script>
    <script src="../../../resources/js/bootstrap.min.js" th:src="@{/resources/js/bootstrap.min.js}"></script>
</head>

<body>
    <div th:replace="~{fragments/header :: header}">Header</div>
    <div class="container">
        <div class="text-center">

            <h1>Thymeleaf Layouts</h1>

            <div class="lead" th:insert="http://www.thymeleaf.org :: section.description">
                Welcome to the Spring MVC Quickstart application! Get started quickly by signing up.
            </div>

            <p>
                <a id="signup" class="btn btn-success btn-lg">Sign up</a>
            </p>
        </div>
        <div th:insert="~{fragments/footer :: footer}">&copy; 2017 The Static Templates</div>
    </div>
    <script th:inline="javascript" type="text/javascript">
        /* Fill in modal with content loaded with Ajax */
        $(document).ready(function () {
            $('#signup').on('click', function (e) {
                $("#myModal").modal();
                $("#myModalBody").text("");
                $.ajax({
                    url: "signup",
                    cache: false
                }).done(function (html) {
                    $("#myModalBody").append(html);
                });
            })
        });
    </script>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Signup</h4>
                </div>
                <div class="modal-body" id="myModalBody">Lorem ipsum</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</body>

</html>